<template>
  <div class="stepper-demo">
    <t-button @click="dialogVisible = !dialogVisible">{{
      !!dialogVisible
    }}</t-button>
    <q-dialog v-model="dialogVisible">
      <div class="dialog-content">
        <t-stepper
          v-model="step"
          class="fasr_stepper185741"
          :staticItems="staticItems"
          :headerNav="headerNav"
          :alternative-labels="alternativeLabels"
          :vertical="vertical"
          :isShowNav="isShowNav"
          :activeColor="'red'"
          @transition="emitTrasition"
          :clickNext="clickNext"
          :clickPrevious="clickPrevious"
          :tabIndex="2"
        >
          <template #default="defaultProps">
            <div :class="'inner_' + 1">
              <div class="placeholder"> 自定义内容区域 步骤-1 </div>
            </div>
            <div :class="'inner_' + 2">
              <div class="placeholder"> 自定义内容区域 步骤-2 </div>
            </div>
            <div :class="'inner_' + 3">
              <div class="placeholder"> 自定义内容区域 步骤-3 </div>
            </div>
          </template>
        </t-stepper>
        <div class="btn-line">
          <t-button
            class="tr-button-primary"
            @click="alternativeLabels = !alternativeLabels"
          >
            切换 alternative-labels:
            {{
              alternativeLabels +
              (alternativeLabels ? ' - 标题居下' : ' - 标题居右')
            }}
          </t-button>
          <t-button class="tr-button-primary" @click="headerNav = !headerNav">
            切换 header-nav:
            {{
              headerNav + (headerNav ? ' - 导航式标题' : ' - 点击标题不可切换')
            }}
          </t-button>
          <t-button class="tr-button-primary" @click="isShowNav = !isShowNav">
            切换 is-show-nav:
            {{
              isShowNav +
              (isShowNav
                ? ' - 自动生成按钮(上一步/下一步)'
                : ' - 不自动生成按钮')
            }}
          </t-button>
        </div>
      </div>
    </q-dialog>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue';
const dialogVisible = ref(true);
const refStepper = ref();
const step = ref(2);
const headerNav = ref(true);
const alternativeLabels = ref(false);
const vertical = ref(false);
const isShowNav = ref(true);

const emit = defineEmits(['click', 'update:modelValue']);
const _OnError = () => {};

onMounted(() => {});
const staticItems = ref([
  {
    name: 1,
    title: '步骤1',
    done: false,
    caption: '',
  },
  {
    name: 2,
    title: '步骤2',
    done: false,
    caption: '',
    disable: false, // 默认值即为 false
  },
  {
    name: 3,
    title: '步骤3',
    done: true,
    caption: '',
  },
]);

const clickNext = () => {
  if (step.value < 3) {
    step.value++;
  }
  // 可根据条件，设置每一步的 title（done，error，disable）状态
  // if(step.value === 1) staticItems.value[0].done = true
  // if(step.value === 2) staticItems.value[1].error = true
  // if(step.value === 6) staticItems.value[5].done = true
};
const clickPrevious = () => {
  step.value--;
};
const emitUpdate = e => {
  console.log('father, T modelValue - ', e);
  step.value = e;
};
const handleQModleValue = e => {
  console.log('father, Q modelValue - ', e);
  step.value = e;
};
const emitTrasition = e => {
  console.log('emitTrasition - ', e);
};
</script>

<style lang="scss" scoped>
.stepper-demo {
  padding: 12px;
}
.btn-line {
  padding: 12px 0;
  .q-btn {
    margin-right: 12px;
    margin-bottom: 12px;
  }
}
.placeholder {
  height: 300px;
  border: 1px solid pink;
}
.dialog-content {
  box-sizing: border-box;
  background: #fff;
  padding: 20px 25px;
}
</style>
